<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动感可乐</title>
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #f3f5f7;
    }
    *{
        padding: 0;
        margin: 0;
    }
    img {
      width: 100px;
    }
    .can {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 20px;
      .can-card {
        position: relative;
        width: 450px;
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transition: all 0.3s ease;
        }
        .can-card__circle {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 170px;
          height: 170px;
          border-radius: 50%;
          background-color: red;
          transition: all 0.3s ease;
         
        }
        .can-card__content{
            position: relative;
            top: 0;
            visibility: hidden;
            opacity: 0;
            padding-left: 10px;
            h3{
              color: #fff;
            }
            p{
              color: #fff;
                margin-top: 10px;
                font-size: 13px;
                text-indent: 1em;
            }
            button{
                border: none;
                background-color: #fff;
                padding: 10px 20px;
                border-radius: 20px;
                cursor: pointer;
                margin-top: 10px;
            }
        }
        &:hover {
          .can-card__circle {
            width: 450px;
            height: 250px;
            border-radius: 10px;
            background-color: #0065c2;
          }
          img {
            transform: translate(60%, -50%) scale(1.7);
          }
          .can-card__content{
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
  </style>
  <body>
    <div class="can">
      <!-- 可乐 -->
      <div class="can-card">
        <div class="can-card__circle"></div>
        <div class="can-card__content">
          <h3>PEPSI COLA</h3>
          <p>
            Lorem ipsum,dolor sit amet <br />
            consectetur adipisicing elit. <br />
            iustoLorem ipsum dolor sit amet <br />
            consectetur adipisicing elit. <br />
            Doloremque itaque, <br />
            consequuntur
          </p>
          <button>Buy Now</button>
        </div>
        <img src="./assets/images/pepsi/可乐-one.png" alt="" />
      </div>
      <div class="can-card">
        <div class="can-card__circle"></div>
        <div class="can-card__content">
            <h3>PEPSI COLA</h3>
            <p>
              Lorem ipsum,dolor sit amet <br />
              consectetur adipisicing elit. <br />
              iustoLorem ipsum dolor sit amet <br />
              consectetur adipisicing elit. <br />
              Doloremque itaque, <br />
              consequuntur
            </p>
            <button>Buy Now</button>
          </div>
        <img src="./assets/images/pepsi/可乐-two.png" alt="" />
      </div>
      <div class="can-card">
        <div class="can-card__circle"></div>
        <div class="can-card__content">
            <h3>PEPSI COLA</h3>
            <p>
              Lorem ipsum,dolor sit amet <br />
              consectetur adipisicing elit. <br />
              iustoLorem ipsum dolor sit amet <br />
              consectetur adipisicing elit. <br />
              Doloremque itaque, <br />
              consequuntur
            </p>
            <button>Buy Now</button>
          </div>
        <img src="./assets/images/pepsi/可乐-three.png" alt="" />
      </div>
    </div>
  </body>
</html>
